<template>
    <div>
        <div v-if="isHasAddBtn" class="item-operation">
            <span class="f14">{{ $t('datasetPermission.detailTabs.group') }}{{ listId + 1 }}</span>
            <div class="item-btn-group">
                <button :disabled="disabled" class="common-button mgr-10" @click="deleteItem(tabsConfig.list, listId)">
                    <i class="rbp-operate_delete iconfont hover mini-icon" :class="{ 'disabel-icon': disabled }" />
                </button>
                <el-button circle size="mini" :disabled="disabled" class="multiple-box__add common-button" @click="editOptions">
                    <i class="el-icon-plus hover mini-icon" :class="{ 'disabel-icon': disabled }" />
                </el-button>
            </div>
        </div>
        <base-table
            :tableData="listItem.chooseTable"
            :colunmData="tableHeader"
            :tableConfig="{
                isMultiSelect: false,
                operatWidth: '60px'
            }"
        >
            <template v-slot="{ scope }">
                <el-button id="btn_t_gray" type="text" size="mini" :disabled="disabled" @click.stop.prevent="deleteTag(scope)">
                    {{ $t('layout.btns.delete') }}
                </el-button>
            </template>
        </base-table>

        <prop-filter-dialog
            :dialogObj="dialogObj"
            :propFilterTabs="tabsConfig.propTabs"
            :dataGroup="listItem.formdata"
            @cancel="cancel"
            @confirm="confirm"
        />
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { Dictionary, TableHeaderConfig, DialogObj } from '@/typings';

@Component({
    name: 'multiple-box',
    components: {
        propFilterDialog: () => import('./prop-filter-dialog.vue'),
        baseTable: () => import('../base-table/index.vue')
    }
})
export default class multipleBox extends Vue {
    // @Prop({ required: true }) tableData: any[]
    @Prop({ required: true }) tabsConfig: Dictionary<any>;
    @Prop() listId: Number;
    @Prop({ required: true }) listItem: Dictionary<any>;
    @Prop({ default: true }) isHasAddBtn: Boolean;

    @Prop() disabled: boolean;
    dialogObj: DialogObj = {
        isShowDialog: false,
        title: '',
        modalAppendToBody: true,
        width: '790px'
    };
    tableHeader: TableHeaderConfig[] = [
        {
            label: '项目',
            value: 'name',
            width: '80px'
        },
        {
            label: '值',
            value: 'value',
            width: '200px'
        }
    ];
    deleteItem(list, index) {
        this.$emit('deleteItem', { index });
    }
    deleteTag(scope) {
        this.$emit('deleteTag', scope);
    }
    editOptions() {
        this.$emit('openDialog');
        // 这里给筛选器存储对象赋值key 并且赋值
        this.resetRangeData();
        this.dialogObj.isShowDialog = true;
        this.dialogObj.title = this.$t(this.tabsConfig.lang);
    }
    resetRangeData() {
        this.tabsConfig.propTabs.forEach((k) => {
            if (!this.listItem.formdata[k.value]) {
                this.$set(this.listItem.formdata, k.value, []);
            } else {
                const chooseObj = this.listItem.chooseTable.find((item) => item.code === k.value);
                console.log('chooseObj', chooseObj);
                chooseObj && this.$set(this.listItem.formdata, k.value, chooseObj.listModule);
            }
        });
    }
    confirm({ selected, treeLableConfig }) {
        const allChooseObj = Object.assign({}, this.listItem.formdata, treeLableConfig);
        // console.log('allChooseObj', allChooseObj)
        // 这里把 选中的值放到外部显示
        // this.$set(this.listItem, 'chooseTable', [])
        // Object.keys(this.listItem.formdata).forEach((keys) => {
        //   const findPropTab: Dictionary<any> = this.tabsConfig.propTabs.find((groupItem) => groupItem.value === keys)
        //   this.listItem.formdata[keys].length && this.listItem.chooseTable.push({
        //     name: findPropTab.label,
        //     code: findPropTab.value,
        //     value: this.getChoosePropName(findPropTab, this.listItem.formdata[keys]),
        //     listModule: this.listItem.formdata[keys]
        //   })
        // })
        Object.keys(allChooseObj).forEach((keys) => {
            const findPropTab = this.tabsConfig.propTabs.find((groupItem) => groupItem.value === keys);

            if (allChooseObj && allChooseObj[keys]) {
                const chooseIndex = this.listItem.chooseTable.findIndex((choose) => choose.code === keys);
                // console.log('chooseIndex', chooseIndex)
                //  如果没有则添加
                if (chooseIndex === -1) {
                    allChooseObj[keys].length &&
                        this.listItem.chooseTable.push({
                            name: findPropTab.label,
                            code: findPropTab.value,
                            value: this.getChoosePropName(findPropTab, allChooseObj[keys]),
                            listModule: allChooseObj[keys]
                        });
                } else {
                    //  如果有则更新 value 和 listModule
                    this.$set(this.listItem.chooseTable[chooseIndex], 'value', this.getChoosePropName(findPropTab, allChooseObj[keys]));
                    this.$set(this.listItem.chooseTable[chooseIndex], 'listModule', allChooseObj[keys]);
                }
            }
        });
        // 需要在外层去更新数据用户传给后端
        const chooseData: any = {};
        if (selected) {
            chooseData[selected] = this.listItem.formdata[selected];
            this.$emit('confirm', chooseData, selected);
        } else {
            this.$emit('confirm', this.listItem.formdata);
        }
    }
    // 通过选项值在 options 中找到对应 name
    getChoosePropName(findPropTab, chooseArr) {
        if (findPropTab.type === 'tableTemplate' || findPropTab.type === 'treeTemplate') {
            return chooseArr.map((item) => item.name).join('; ');
        } else if (findPropTab.type === 'checkboxTemplate') {
            return findPropTab.options
                .filter((item) => chooseArr.includes(item.id))
                .map((filterItem) => filterItem.name)
                .join('; ');
        }
    }
    cancel() {
        this.resetRangeData();
    }
}
</script>

<style lang="scss" scoped>
@import 'src/styles/variables.scss';
.multiple-box.disable-multiple-box {
    background-color: #f5f7fa;
    border-color: $borderColorBase;
    color: $colorTextPlaceholder;
    cursor: not-allowed;
}
// .common-button{
//   width: 16px;
//   height: 16px;
// }
.mini-icon {
    font-size: 16px;
}
.item-operation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
</style>
